<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="js/three.js"></script>
		<script type="text/javascript" src="js/TrackballControls.js"></script>
		<script type="text/javascript" src="js/DDSLoader.js"></script>
		<script type="text/javascript" src="js/OBJLoader.js"></script>
		<script type="text/javascript" src="js/OBJMTLLoader.js"></script>
		<script src="js/dat.gui.js"></script>
		<title></title>
	</head>
	<style>
		body {
			margin: 0;
			overflow: hidden;
		}
		
		#percent {
			position: absolute;
			width: 200px;
			height: 20px;
			color: red;
			text-align: center;
			border: 1p;
		}
	</style>

	<body>
		<div id="percent"></div>
		<div id="WebGL-output">

		</div>
		<script>
			$(function() {
				//直接开启帧数检测
				//编辑代码处
				var scene = new THREE.Scene(); //场景构建
				var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); //相机构建
				var renderer = new THREE.WebGLRenderer(); //渲染器构建
				var mesh;
				renderer.setClearColor("#5D6268");
				renderer.setSize(window.innerWidth, window.innerHeight);
				//	renderer.shadowMapEnabled = true;//激活阴影
				//构建一个坐标轴
				var axes = new THREE.AxisHelper(20);
				scene.add(axes);
				//创建控件并绑定在相机上
				trackballControls = new THREE.TrackballControls(camera);
				trackballControls.rotateSpeed = 1.0;
				trackballControls.zoomSpeed = 1.0;
				trackballControls.panSpeed = 1.0;
				trackballControls.noZoom = false;
				trackballControls.noPan = false;
				trackballControls.staticMoving = true;
				trackballControls.dynamicDampingFactor = 0.3;

				//添加材质灯光阴影
				var spotLight = new THREE.DirectionalLight(0xffffff);
				spotLight.position.set(10, 20, 10);
				spotLight.castShadow = true;
				scene.add(spotLight);

				/*var light = new THREE.PointLight(0xffffff, 2, 100);
				light.position.set(0, 1.5, 2);
				scene.add(light);*/

				// model
				var onProgress = function(xhr) {
					if(xhr.lengthComputable) {
						var percentComplete = xhr.loaded / xhr.total * 100;
						var percent = document.getElementById("percent");
						percent.innerText = Math.round(percentComplete, 2) + '% 已经加载';
					}
				};
				var onError = function(xhr) {};
				var mtlLoader = new THREE.MTLLoader();
				mtlLoader.setPath('city/');
				mtlLoader.load('房子-灯光.mtl', function(materials) {

					materials.preload();
					//	console.log(materials)
					var objLoader = new THREE.OBJLoader();
					objLoader.setMaterials(materials);
					objLoader.setPath('city/');
					objLoader.load('房子-灯光.obj', function(object) {
						mesh=object;
						var id=0;
						object.traverse(function(child) {
							if(child instanceof THREE.Mesh) {
								if(child.name.indexOf("window")>-1){ 
						            //每个储位单独赋予一个基础材质     
						            	
						            	//child.material=new THREE.MeshBasicMaterial();
										var deleteStyle=child.material.shift();
										//child.material.push(deleteStyle);
										//child.material[0].alphaTest=1;
						                console.log(child);
						       }												                
				                child.material.side = THREE.DoubleSide;
							}
						});
						objLoader.setMaterials(materials);
						object.position.y = -50;
						object.rotation.y = 0.5;
						object.scale.set(0.01, 0.01, 0.01);
						scene.add(object);

					}, onProgress, onError);
				});
				//渲染视图视角
				camera.position.x = 30;
				camera.position.y = 10;
				camera.position.z = 200;
				camera.lookAt(scene.position)
				$("#WebGL-output").append(renderer.domElement)

				var raycaster = new THREE.Raycaster();
				var mouse = new THREE.Vector2();

				function onMouseClick(event) {

					//通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
					mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
					mouse.y = (event.clientY / window.innerHeight) * 2 - 1;
					//通过鼠标点的位置和当前相机的矩阵计算出raycaster
					raycaster.setFromCamera(mouse, camera);
					// 获取raycaster直线和所有模型相交的数组集合
					var intersects = raycaster.intersectObjects(scene.children,true);
					
					//console.log(intersects);
					
				}
				//window.addEventListener('click', onMouseClick, false);
				//初始化dat.GUI简化试验流程
				var gui;

				function initGui() {
					//声明一个保存需求修改的相关数据的对象
					controls = {

					};
					var gui = new dat.GUI();
				}

				renderScene();

				function renderScene() {
					var clock = new THREE.Clock();
					var delta = clock.getDelta();
					trackballControls.update(delta);
					requestAnimationFrame(renderScene);
					renderer.render(scene, camera);
				};

				function onDocumentMouseDown(e) {
					var mouse = {};
					e.preventDefault();

					//将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
					mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
					mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
					//新建一个三维单位向量 假设z方向就是0.5
					//根据照相机，把这个向量转换到视点坐标系
					var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);

					//在视点坐标系中形成射线,射线的起点向量是照相机， 射线的方向向量是照相机到点击的点，这个向量应该归一标准化。
					var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

					//射线和模型求交，选中一系列直线
					var intersects = raycaster.intersectObjects(scene.children,true);

					if(intersects.length > 0) {
						//选中第一个射线相交的物体
						SELECTED = intersects[0].object;
						var intersected = intersects[0].object;
						console.log(intersects[0].object);
						if(intersected.name.indexOf("window")>-1){ 
				            var color=intersected.material.color||intersected.material[0].color;
				            if(intersected.material.length>1){
				            	intersected.material.pop();
				            }else{
				            	intersected.material.push(new THREE.MeshBasicMaterial({color:0xffff00}));
				            }
							
							//color.set(0xffff00);
				       }						
					}

				}

				$("body").click(function(e) {
					onDocumentMouseDown(e);
				});
			});
		</script>

	</body>

</html>